<template>
  <div class="msgHint.vue">
    <div :class="['msg_box']">
      <div
        class="msg_left"
        :style="{height:height,width:width}"
      >
        <img
          @click="handCols()"
          class="msg_tz"
          src="../assets/imges/tz.png"
          alt=""
        >
        <span class="msg_left_title">{{title}}</span>
      </div>

    </div>
  </div>
</template>

<script>
export default {
  name: "msgHint.vue",
  props: ["title", "height", "width"],

  data() {
    return {};
  },

  methods: {
    handCols() {
      this.$store.commit("handBus", false);
    }
  }
};
</script>

<style lang='scss' scoped>
.height_act {
  width: 261;
}

.msg_box {
  background: rgba(255, 255, 255, 1);
  .msg_right {
    cursor: pointer;
    display: flex;
    align-items: center;
    height: 49px;
    .msg_right_title {
      color: #21b8ee;
      font-size: 16px;
    }
    .msg_right_tz {
      margin-right: 16px;
      margin-left: 6px;
    }
  }
  .msg_left {
    display: flex;
    align-items: center;
    width: 166px;
    height: 48px;
    background: linear-gradient(
      180deg,
      rgba(36, 194, 247, 1) 0%,
      rgba(16, 118, 183, 1) 100%
    );
    .msg_tz {
      // border: 1px dashed #ccc;
      width: 20px;
      height: 20px;
      margin-left: 5px;
      margin-right: 10px;
    }
    .msg_left_title {
      color: #ffffff;
      font-size: 18px;
      // line-height: 49px;
    }
  }
  display: flex;
  justify-content: space-between;
  width: 100%;
  height: 49px;
}
</style>
